<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=m43tw9ojhPo4MV2SjSlqGU60Pvewrady"></script>
    <title>视角动画</title>
</head>
<body>
	<div id="allmap"></div>
</body> 
</html>


<script type="text/javascript" src="JavaScript/qwebchannel.js"></script>
<!--<script type="text/javascript" src="//gitee.com/li_hong_chen/bus_priority/blob/master/JavaScript/qwebchannel.js"></script>-->

<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var bmap = new BMapGL.Map("allmap");    // 创建Map实例

bmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 13);  // 初始化地图,设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放


window.onload = function () {
    new QWebChannel(qt.webChannelTransport, function (channel) {
        // 获取qt中绑定的交互对象
        window.pyjs_station = channel.objects.Web_Channel
        // js 绑定qt中的信号
        pyjs_station.list_send_to_js.connect(function (list) {
            var end = list.pop()

            if (end[0] === 'station'){
                show_station(list, end)
            }
            else if (end[0] === 'bus'){
                show_bus(list, end)
            }
            else if (end[0] === 'road_flow'){
                show_road_flow(end)
            }
            else if (end[0] === 'POI_words'){
                show_POI_words(end)
            }
            else if (end[0] === 'POI_icon'){
                show_POI_icon(end)
            }
        });
    });

}


function show_station(list, end){
    // 关于动态变量以及闭包问题
    // ref:https://www.imooc.com/wenda/detail/400261
    var marker = {}
    var infoWindow = {}
    var point = {}
    if (end[1] === 1) {
    	var bus_station = new BMapGL.Icon("img/bus_stop.png", new BMapGL.Size(60, 60));
        for (var i=0; i<list.length; i++) {
            var x_point =  parseFloat(list[i][2]).toFixed(6);
            var y_point =  parseFloat(list[i][3]).toFixed(6);
            point[i] = new BMapGL.Point(x_point, y_point);
            marker[i] = new BMapGL.Marker(point[i], {title:list[i][1] + "公交车站", icon: bus_station});
            var opts = {
                width: 100,
                height: 50,
                title: list[i][1] + "公交车站"
            };
            let j = i
            infoWindow[i] = new BMapGL.InfoWindow('公交车站', opts);
            marker[i].addEventListener('click', function () {
                bmap.openInfoWindow(infoWindow[j], point[j]); // 开启信息窗口
            });
            bmap.addOverlay(marker[i]);
        }
    } else {
        // bmap.clearOverlays()

        var allOverlay = bmap.getOverlays();
        for (var j=0; j<allOverlay.length; j++) {
            var title = allOverlay[j].getTitle().substr(-4, 4)
            if(title === "公交车站"){
                bmap.removeOverlay(allOverlay[j]);
            }
        }
    }
}


function show_bus(list, end){
    var marker = {}
    var infoWindow = {}
    var point = {}
    if (end[1] === 1) {
        var myIcon = new BMapGL.Icon("img/bus.png", new BMapGL.Size(60, 60));
        for (var i=0; i<list.length; i++) {
            var x_point =  parseFloat(list[i][5]).toFixed(6);
            var y_point =  parseFloat(list[i][6]).toFixed(6);
            point[i] = new BMapGL.Point(x_point, y_point);
            marker[i] = new BMapGL.Marker(point[i], {title:list[i][0] + "公交车" , icon: myIcon});
            var opts = {
                width: 100,
                height: 50,
                title: list[i][0] + "公交车"
            };
            let j = i
            var mess = "乘客数量：" + String(list[i][2]) + "\n" + "延误时间：" + String(list[i][3]) + "行驶速度：" + String(list[i][4])
            infoWindow[i] = new BMapGL.InfoWindow(mess, opts);
            marker[i].addEventListener('click', function () {
                bmap.openInfoWindow(infoWindow[j], point[j]); // 开启信息窗口
            });
            bmap.addOverlay(marker[i]);
        }
    } else {
        // bmap.clearOverlays()
        var allOverlay = bmap.getOverlays();
        for (var j=0; j<allOverlay.length; j++) {
            var title = allOverlay[j].getTitle().substr(-3, 3)
            if(title === "公交车"){
                bmap.removeOverlay(allOverlay[j]);
            }
        }
    }
}

function show_road_flow(end){
    if (end[1] === 1){
        bmap.setTrafficOn(); // 叠加路况图层
    }
    else if (end[1] === 0){
        bmap.setTrafficOff(); // 关闭路况图层
    }
}

function show_POI_words(end){
    if (end[1] === 1){
        bmap.setDisplayOptions({
            poiText: true
        })
    }
    else if (end[1] === 0){
        bmap.setDisplayOptions({
            poiText: false
        })
    }
}


function show_POI_icon(end){
    if (end[1] === 1){
        bmap.setDisplayOptions({
            poiIcon: true
        })
    }
    else if (end[1] === 0){
        bmap.setDisplayOptions({
            poiIcon: false
        })
    }
}


function show_Trank()                    //仅把qt传来的数组转换成可用的list
{
   	var path = [{
        'lng': 116.362943,
        'lat': 39.927034
    }, {
    	'lng': 116.362818,
    	'lat': 39.929427
    }, {
    	'lng': 116.359629,
    	'lat': 39.929257
    }, {
    	'lng': 116.351117,
    	'lat': 39.928929
    }, {
    	'lng': 116.341245,
    	'lat': 39.928635
    }, {
    	'lng': 116.332396,
    	'lat': 39.929254
    }, {
    	'lng': 116.316699,
    	'lat': 39.930049
    }];



    var point = [];

    for (var i = 0; i < path.length; i++) {
        point.push(new BMapGL.Point(path[i].lng, path[i].lat));
    }

    var polyline =new BMap.Polyline(point, {
		enableEditing: false,//是否启用线编辑，默认为false
		enableClicking: false,//是否响应点击事件，默认为true
		strokeWeight:'4',//折线的宽度，以像素为单位
		strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
		strokeColor:"red" //折线颜色
    });

    bmap.addOverlay(polyline);          //增加折线

}

</script>